<template>
    <div class="login w400px m-auto mt150px">
        <el-card v-if="isShowLogin">
            <p class="w100% text-align-center h40px font-size-18px">登录</p>
            <el-form ref="from">
                <el-form-item>
                    <el-input placeholder="请输入用户名"  :prefix-icon="User" v-model="myIsLogin.username" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input type="password" placeholder="请输入密码" :prefix-icon="Lock" v-model="myIsLogin.password"></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button 
                        class="w100% ml-auto"
                        @click="handleLogin" 
                        type="primary"
                        v-loading.fullscreen.lock="fullscreenLoading"
                        >登录</el-button>
                </el-form-item>
                <span style="cursor: pointer" @click="isShowLogin=false">注册-></span>
            </el-form>
        </el-card>

        <el-card v-else>
            <p class="w100% text-align-center h40px font-size-18px">注册</p>
            <el-form >
                <el-form-item>
                    <el-input placeholder="请输入用户名"  :prefix-icon="User"  v-model="myIsRegister.username"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input type="password" placeholder="请输入密码" :prefix-icon="Lock" v-model="myIsRegister.password"></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button 
                    class="w100% ml-auto" 
                    @click="handleRegister"  
                    v-loading.fullscreen.lock="fullscreenLoading"
                    type="primary"
                    >
                    注册</el-button>
                </el-form-item>
                <span style="cursor: pointer" @click="isShowLogin=true">登录-></span>
            </el-form>
        </el-card>
    </div>
</template>
<script setup>
import {  User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { isLogin, isRegister } from '@/api/register.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const isShowLogin = ref(true)
//登录账号密码
const myIsLogin = ref({
    username: 'admin',
    password: '123456'
})
//注册账号密码
const myIsRegister = ref({
    username: '',
    password: ''
})
//加载
const fullscreenLoading = ref(false)
//登录
const from = ref()
const handleLogin =async()=>{
    //from.value.validate()   表单校验,点击按钮如果没有填账号密码会弹出校验
    if(!myIsLogin.value.username || !myIsLogin.value.password) return ElMessage.warning('用户名和密码不能为空')
    const res =await isLogin(myIsLogin.value)
    if(res.data.success){
        fullscreenLoading.value = true
        setTimeout(function(){
            router.push('/home')
            ElMessage.success('登录成功')
            fullscreenLoading.value = false
        },500)
    }else{
        ElMessage.warning('账号或密码错误')
    }
}
//注册
const handleRegister =async()=>{
    if(!myIsRegister.value.username || !myIsRegister.value.password) return ElMessage.warning('用户名和密码不能为空')
    const res =await isRegister(myIsRegister.value)
    if(myIsRegister.value.username === res.data.data.username){
            ElMessage.warning('用户名已存在')
    }
    if(res.data.success){
        fullscreenLoading.value = true
        setTimeout(function(){
            fullscreenLoading.value = false
            ElMessage.success('注册成功')
            isShowLogin.value = true
            accountAndPassword.value = {}
        },500)
    }else{
        ElMessage.warning('用户名错误')
    }
    console.log(res)
}
</script>